import 'package:flutter/material.dart';
import 'package:flutter_study/datas/goodsData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliver',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /*appBar: AppBar(
        title: Text('Sliver'),
      ),*/
      body: CustomScrollView(
        slivers: [
          // 顶部appbar
          SliverAppBar(
            // title: Text('Sliver'),
            // pinned 固定appbar
            // pinned: true,
            // floating appbar跟随页面滚动
            floating: true,
            // appbar 高度
            expandedHeight: 178.0,
            // 跟随滑动 appbar 有渐变缩小动画
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                'Sliver',
                style: TextStyle(
                    fontSize: 15.0,
                    letterSpacing: 3.0,
                    fontWeight: FontWeight.w400),
              ),
              background: Image.network(
                'https://www.itying.com/images/flutter/7.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 适配刘海屏
          SliverSafeArea(
              // 为列表添加padding
              sliver: SliverPadding(
            padding: EdgeInsets.all(12.0),
            sliver: SliverListView(),
            // SliverGridView(),
          )),
        ],
      ),
    );
  }
}

// sliver listView
class SliverListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate((ctx, index) {
        return Padding(
          padding: EdgeInsets.only(bottom: 32.0),
          child: Material(
            borderRadius: BorderRadius.circular(12.0),
            elevation: 14.0,
            shadowColor: Colors.grey.withOpacity(.5),
            child: Stack(
              children: [
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.network(
                    goodsData[index]['imageUrl'],
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  left: 32.0,
                  top: 32.0,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '${goodsData[index]['title']}',
                        style: TextStyle(fontSize: 24.0, color: Colors.white),
                      ),
                      Text(
                        '${goodsData[index]['author']}',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

// sliver gridView
class SliverGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      delegate: SliverChildBuilderDelegate((ctx, index) {
        return Container(
          child: Image.network(goodsData[index]['imageUrl']),
        );
      }, childCount: goodsData.length),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
        childAspectRatio: 1.0,
      ),
    );
  }
}
